/**
 * 绘图工具函数 - 基于 GeometryWorkspace 的统一绘制规范
 * 所有样式和行为都源自 GeometryWorkspace 的现有实现
 */

import { convertToMathSymbols } from './canvasUtils.js';

// ============ 统一的样式常量（来自 GeometryWorkspace） ============

export const DRAWING_STYLES = {
  // 顶点样式
  point: {
    size: 8,                     // 顶点大小（radius）- 用户端增大
    draggableColor: '#007AFF',    // 可拖动顶点颜色（蓝色）
    fixedColor: '#999999',        // 固定顶点颜色（灰色）
    strokeColor: '#fff',          // 白色边框
    strokeWidth: 2,               // 边框宽度
    selectedStrokeColor: '#0066ff', // 选中时的边框颜色
    selectedStrokeWidth: 3,       // 选中时的边框宽度
  },
  
  // 线条样式
  line: {
    width: 2,                     // 默认线宽
    color: '#333',                // 默认线条颜色
    solidPattern: [],             // 实线
    dashedPattern: [5, 5],        // 虚线模式
  },
  
  // 文本标签样式
  label: {
    fontSize: 20,                 // 字体大小 - 用户端增大
    fontFamily: 'Times New Roman', // 字体
    color: '#000',                // 文本颜色
    offsetX: 15,                  // 标签X偏移
    offsetY: -10,                 // 标签Y偏移
    italicFont: 'italic 20px Times New Roman', // 斜体字体（用于顶点标签）
  },
};

// ============ 绘制函数 ============

/**
 * 绘制顶点（完全复刻 GeometryWorkspace 的 drawPoint）
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {Object} point - 顶点数据 { x, y, label?, draggable?, color?, labelFontSize?, labelOffset? }
 * @param {Object} offset - 偏移量 { offsetX, offsetY }
 * @param {boolean} isSelected - 是否选中
 */
export function drawPoint(ctx, point, offset = { offsetX: 0, offsetY: 0 }, isSelected = false) {
  const { x, y, label, draggable = true, color, labelFontSize, labelOffset: customLabelOffset } = point;
  const { offsetX, offsetY } = offset;
  const size = DRAWING_STYLES.point.size;
  
  ctx.save();
  
  // 绘制点 - 根据 draggable 状态决定颜色
  const defaultColor = draggable === false 
    ? DRAWING_STYLES.point.fixedColor 
    : DRAWING_STYLES.point.draggableColor;
  
  ctx.fillStyle = color || defaultColor;
  ctx.beginPath();
  ctx.arc(x + offsetX, y + offsetY, size, 0, Math.PI * 2);
  ctx.fill();
  
  // 选中状态（蓝色边框）
  if (isSelected) {
    ctx.strokeStyle = DRAWING_STYLES.point.selectedStrokeColor;
    ctx.lineWidth = DRAWING_STYLES.point.selectedStrokeWidth;
    ctx.stroke();
  }
  
  // 白色边框
  ctx.strokeStyle = DRAWING_STYLES.point.strokeColor;
  ctx.lineWidth = DRAWING_STYLES.point.strokeWidth;
  ctx.stroke();
  
  // 绘制标签
  if (label) {
    // 应用自定义标签偏移
    const customOffset = customLabelOffset || { x: 0, y: 0 };
    const fontSize = labelFontSize || DRAWING_STYLES.label.fontSize;
    
    ctx.fillStyle = DRAWING_STYLES.label.color;
    ctx.font = `italic ${fontSize}px ${DRAWING_STYLES.label.fontFamily}`;
    ctx.fillText(
      label, 
      x + offsetX + DRAWING_STYLES.label.offsetX + customOffset.x, 
      y + offsetY + DRAWING_STYLES.label.offsetY + customOffset.y
    );
  }
  
  ctx.restore();
}

/**
 * 绘制线段（完全复刻 GeometryWorkspace 的 drawLine）
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {Object} startPoint - 起点 { x, y }
 * @param {Object} endPoint - 终点 { x, y }
 * @param {Object} lineStyle - 线条样式 { style?, color?, width?, label?, labelFontSize?, labelOffset? }
 * @param {Object} offset - 偏移量 { offsetX, offsetY }
 */
export function drawLine(ctx, startPoint, endPoint, lineStyle = {}, offset = { offsetX: 0, offsetY: 0 }, isEditorMode = false) {
  const { style = 'solid', color, width, label, labelFontSize, labelOffset: customLabelOffset } = lineStyle;
  const { offsetX, offsetY } = offset;
  
  // 如果是隐藏线条且不是编辑模式，不绘制
  if (style === 'hidden' && !isEditorMode) {
    return;
  }
  
  ctx.save();
  
  // 设置线宽
  ctx.lineWidth = width || DRAWING_STYLES.line.width;
  
  // 设置颜色和阴影
  if (style === 'hidden' && isEditorMode) {
    // 编辑模式下的隐藏线条：灰色带阴影
    ctx.strokeStyle = '#999';
    ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
    ctx.shadowBlur = 4;
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 1;
    ctx.setLineDash([3, 3]); // 短虚线
  } else if (style === 'dashed') {
    ctx.strokeStyle = color || DRAWING_STYLES.line.color;
    ctx.setLineDash(DRAWING_STYLES.line.dashedPattern);
  } else {
    ctx.strokeStyle = color || DRAWING_STYLES.line.color;
    ctx.setLineDash(DRAWING_STYLES.line.solidPattern);
  }
  
  // 绘制线段
  ctx.beginPath();
  ctx.moveTo(startPoint.x + offsetX, startPoint.y + offsetY);
  ctx.lineTo(endPoint.x + offsetX, endPoint.y + offsetY);
  ctx.stroke();
  
  // 绘制线段标签（如果有）
  if (label) {
    // 计算线段中点
    const midX = (startPoint.x + endPoint.x) / 2;
    const midY = (startPoint.y + endPoint.y) / 2;
    
    // 计算线段方向和垂直偏移
    const dx = endPoint.x - startPoint.x;
    const dy = endPoint.y - startPoint.y;
    const length = Math.sqrt(dx * dx + dy * dy);
    
    // 标签偏移距离（垂直于线段）
    const defaultLabelOffset = 15;
    
    // 垂直向量（向上）
    const perpX = -(dy / length) * defaultLabelOffset;
    const perpY = (dx / length) * defaultLabelOffset;
    
    // 应用自定义偏移
    const customOffset = customLabelOffset || { x: 0, y: 0 };
    const fontSize = labelFontSize || DRAWING_STYLES.label.fontSize;
    
    const labelX = midX + perpX + customOffset.x + offsetX;
    const labelY = midY + perpY + customOffset.y + offsetY;
    
    // 绘制标签文本
    ctx.fillStyle = DRAWING_STYLES.label.color;
    ctx.font = `italic ${fontSize}px ${DRAWING_STYLES.label.fontFamily}`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(label, labelX, labelY);
    
    // 恢复默认对齐方式
    ctx.textAlign = 'left';
    ctx.textBaseline = 'alphabetic';
  }
  
  ctx.restore();
}

/**
 * 绘制文本标签（完全复刻 GeometryWorkspace 的 drawLabel）
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {Object} label - 标签数据 { x, y, text, fontSize?, color?, direction?, labelOffset?, enableSymbolConversion? }
 * @param {Object} offset - 偏移量 { offsetX, offsetY }
 * @param {boolean} isSelected - 是否选中
 */
export function drawLabel(ctx, label, offset = { offsetX: 0, offsetY: 0 }, isSelected = false) {
  const { x: baseX, y: baseY, text, fontSize = DRAWING_STYLES.label.fontSize, color = DRAWING_STYLES.label.color, isAreaLabel, direction = 'right', labelOffset: customLabelOffset, enableSymbolConversion = true } = label;
  const { offsetX, offsetY } = offset;

  // 面积标签始终在中心，不应用任何偏移
  let labelOffsetX = 0;
  let labelOffsetY = 0;

  if (!isAreaLabel) {
    // 非面积标签：根据方向计算偏移量
    labelOffsetX = DRAWING_STYLES.label.offsetX;
    labelOffsetY = DRAWING_STYLES.label.offsetY;

    switch (direction) {
      case 'right':
        labelOffsetX = DRAWING_STYLES.label.offsetX;
        labelOffsetY = DRAWING_STYLES.label.offsetY;
        break;
      case 'left':
        labelOffsetX = -DRAWING_STYLES.label.offsetX;
        labelOffsetY = DRAWING_STYLES.label.offsetY;
        break;
      case 'top':
        labelOffsetX = 0;
        labelOffsetY = -fontSize - DRAWING_STYLES.label.offsetX;
        break;
      case 'bottom':
        labelOffsetX = 0;
        labelOffsetY = DRAWING_STYLES.label.offsetX;
        break;
    }

    // 应用自定义偏移（用户拖拽调整的偏移）
    if (customLabelOffset) {
      labelOffsetX += customLabelOffset.x || 0;
      labelOffsetY += customLabelOffset.y || 0;
    }
  }
  
  ctx.save();

  ctx.fillStyle = color;
  // 使用斜体字体
  ctx.font = `italic ${fontSize}px ${DRAWING_STYLES.label.fontFamily}`;

  let currentX = baseX + offsetX + labelOffsetX;
  let currentY = baseY + offsetY + labelOffsetY;
  let totalWidth = 0;

  // 面积标签：S + 下标内容（居中对齐）
  if (isAreaLabel) {
    // 先计算总宽度
    const sWidth = ctx.measureText('S').width;
    totalWidth = sWidth;

    const content = text.replace(/^[Ss]+/g, ''); // 移除开头的 S
    const mathContent = convertToMathSymbols(content, enableSymbolConversion);

    let subscriptWidth = 0;
    if (mathContent) {
      ctx.save();
      const subscriptFontSize = Math.floor(fontSize * 0.65);
      ctx.font = `${subscriptFontSize}px ${DRAWING_STYLES.label.fontFamily}`;
      subscriptWidth = ctx.measureText(mathContent).width;
      ctx.restore();
      totalWidth += subscriptWidth;
    }

    // 从中心位置向左偏移一半宽度，使标签居中
    const startX = currentX - totalWidth / 2;

    // 绘制大写 S
    ctx.font = `italic ${fontSize}px ${DRAWING_STYLES.label.fontFamily}`;
    ctx.fillText('S', startX, currentY);

    // 绘制下标（正体字体）
    if (mathContent) {
      ctx.save();
      const subscriptFontSize = Math.floor(fontSize * 0.65);
      ctx.font = `normal ${subscriptFontSize}px ${DRAWING_STYLES.label.fontFamily}`;
      const subscriptOffset = Math.floor(fontSize * 0.25);
      ctx.fillText(mathContent, startX + sWidth, currentY + subscriptOffset);
      ctx.restore();
    }

    // 更新 currentX 用于选中框绘制
    currentX = startX;
  } else {
    // 普通标签：应用数学符号转换
    const displayText = convertToMathSymbols(text, enableSymbolConversion);
    ctx.fillText(displayText, currentX, currentY);
    totalWidth = ctx.measureText(displayText).width;
  }
  
  // 选中状态（蓝色矩形边框）
  if (isSelected) {
    ctx.strokeStyle = DRAWING_STYLES.point.selectedStrokeColor;
    ctx.lineWidth = 2;
    ctx.strokeRect(
      currentX - 2, 
      currentY - fontSize, 
      totalWidth + 4, 
      fontSize + 4
    );
  }
  
  ctx.restore();
}

/**
 * 通过索引绘制线段（从 points 数组中获取坐标）
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {Array} points - 顶点数组
 * @param {Object} line - 线段数据 { p1, p2, style?, color?, width? }（p1, p2 是索引）
 * @param {Object} offset - 偏移量
 */
export function drawLineByIndex(ctx, points, line, offset = { offsetX: 0, offsetY: 0 }) {
  const { p1, p2, style, color, width } = line;
  
  if (p1 === undefined || p2 === undefined || !points[p1] || !points[p2]) {
    return; // 索引无效，跳过
  }
  
  const startPoint = points[p1];
  const endPoint = points[p2];
  
  drawLine(ctx, startPoint, endPoint, { style, color, width }, offset);
}

/**
 * 通过 ID 绘制线段（从 points 数组中查找）
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {Array} points - 顶点数组（包含 id 字段）
 * @param {Object} line - 线段数据 { startPointId, endPointId, style?, color?, width?, label?, labelFontSize?, labelOffset? }
 * @param {Object} offset - 偏移量
 */
export function drawLineById(ctx, points, line, offset = { offsetX: 0, offsetY: 0 }, isEditorMode = false) {
  const { startPointId, endPointId, style, color, width, label, labelFontSize, labelOffset } = line;
  
  const startPoint = points.find(p => p.id === startPointId);
  const endPoint = points.find(p => p.id === endPointId);
  
  if (!startPoint || !endPoint) {
    return; // 找不到顶点，跳过
  }
  
  // 将label、labelFontSize和labelOffset传递给drawLine函数统一处理
  drawLine(ctx, startPoint, endPoint, { style, color, width, label, labelFontSize, labelOffset }, offset, isEditorMode);
}

/**
 * 绘制多边形（用实线连接多个顶点）
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {Array} points - 顶点数组 [{x, y}, ...]
 * @param {Object} offset - 偏移量
 * @param {Object} style - 样式 { fill?, stroke?, strokeWidth?, dashPattern? }
 */
export function drawPolygon(ctx, points, offset = { offsetX: 0, offsetY: 0 }, style = {}) {
  if (!points || points.length < 2) return;
  
  const { offsetX, offsetY } = offset;
  const {
    fill = null,
    stroke = DRAWING_STYLES.line.color,
    strokeWidth = DRAWING_STYLES.line.width,
    dashPattern = DRAWING_STYLES.line.solidPattern
  } = style;
  
  ctx.save();
  
  ctx.beginPath();
  ctx.moveTo(points[0].x + offsetX, points[0].y + offsetY);
  
  for (let i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x + offsetX, points[i].y + offsetY);
  }
  
  ctx.closePath();
  
  // 填充
  if (fill) {
    ctx.fillStyle = fill;
    ctx.fill();
  }
  
  // 描边
  if (stroke) {
    ctx.strokeStyle = stroke;
    ctx.lineWidth = strokeWidth;
    ctx.setLineDash(dashPattern);
    ctx.stroke();
  }
  
  ctx.restore();
}

/**
 * 绘制圆或圆弧
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {Object} circle - 圆数据 { x, y, radius, startAngle?, endAngle? }
 * @param {Object} offset - 偏移量
 * @param {Object} style - 样式 { fill?, stroke?, strokeWidth?, dashPattern? }
 */
export function drawCircle(ctx, circle, offset = { offsetX: 0, offsetY: 0 }, style = {}) {
  const { x, y, radius, startAngle = 0, endAngle = Math.PI * 2 } = circle;
  const { offsetX, offsetY } = offset;
  const {
    fill = null,
    stroke = DRAWING_STYLES.line.color,
    strokeWidth = DRAWING_STYLES.line.width,
    dashPattern = DRAWING_STYLES.line.solidPattern
  } = style;
  
  ctx.save();
  
  ctx.beginPath();
  ctx.arc(x + offsetX, y + offsetY, radius, startAngle, endAngle);
  
  // 填充
  if (fill) {
    ctx.fillStyle = fill;
    ctx.fill();
  }
  
  // 描边
  if (stroke) {
    ctx.strokeStyle = stroke;
    ctx.lineWidth = strokeWidth;
    ctx.setLineDash(dashPattern);
    ctx.stroke();
  }
  
  ctx.restore();
}

/**
 * 清空画布
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {number} width - 画布宽度
 * @param {number} height - 画布高度
 */
export function clearCanvas(ctx, width, height) {
  ctx.clearRect(0, 0, width, height);
}

/**
 * 计算点到线段的垂足
 * @param {Object} point - 点坐标 {x, y}
 * @param {Object} lineStart - 线段起点 {x, y}
 * @param {Object} lineEnd - 线段终点 {x, y}
 * @returns {Object} 垂足信息 {foot: {x, y}, t: number, isOnSegment: boolean}
 *   - foot: 垂足坐标
 *   - t: 垂足在线段上的参数（0-1表示在线段内）
 *   - isOnSegment: 垂足是否在线段内
 */
export function calculatePerpendicularFoot(point, lineStart, lineEnd) {
  const { x: px, y: py } = point;
  const { x: x1, y: y1 } = lineStart;
  const { x: x2, y: y2 } = lineEnd;
  
  // 计算线段向量
  const dx = x2 - x1;
  const dy = y2 - y1;
  
  // 线段长度的平方
  const lengthSquared = dx * dx + dy * dy;
  
  if (lengthSquared === 0) {
    // 线段退化为一个点
    return {
      foot: { x: x1, y: y1 },
      t: 0,
      isOnSegment: true
    };
  }
  
  // 计算投影参数 t
  // t = ((P-A) · (B-A)) / |B-A|²
  const t = ((px - x1) * dx + (py - y1) * dy) / lengthSquared;
  
  // 计算垂足坐标
  const footX = x1 + t * dx;
  const footY = y1 + t * dy;
  
  // 判断垂足是否在线段内
  const isOnSegment = t >= 0 && t <= 1;
  
  return {
    foot: { x: footX, y: footY },
    t,
    isOnSegment
  };
}

/**
 * 绘制垂线（从一个点到一条线段的垂线）
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {Object} point - 起始点 {x, y}
 * @param {Object} lineStart - 目标线段起点 {x, y}
 * @param {Object} lineEnd - 目标线段终点 {x, y}
 * @param {Object} offset - 偏移量 {offsetX, offsetY}
 * @param {Object} options - 绘制选项
 *   - drawExtension: 是否绘制延长线（当垂足不在线段内时）
 *   - extensionStyle: 延长线样式 {style: 'dashed', color: '#999', width: 1}
 *   - perpendicularStyle: 垂线样式 {style: 'solid', color: '#333', width: 2}
 *   - drawFootMark: 是否绘制垂足标记（小方块）
 *   - footMarkSize: 垂足标记大小
 */
export function drawPerpendicular(ctx, point, lineStart, lineEnd, offset = { offsetX: 0, offsetY: 0 }, options = {}) {
  const {
    drawExtension = true,
    extensionStyle = { style: 'dashed', color: '#999', width: 1 },
    perpendicularStyle = { style: 'solid', color: '#333', width: 2 },
    drawFootMark = true,
    footMarkSize = 6
  } = options;
  
  const { offsetX, offsetY } = offset;
  
  // 计算垂足
  const { foot, isOnSegment } = calculatePerpendicularFoot(point, lineStart, lineEnd);
  
  // 如果需要延长线且垂足不在线段内，绘制延长线
  if (drawExtension && !isOnSegment) {
    // 计算延长线的起点和终点
    let extStart, extEnd;
    
    // 判断垂足在哪一端
    const { t } = calculatePerpendicularFoot(point, lineStart, lineEnd);
    
    if (t < 0) {
      // 垂足在起点之前，从起点延长到垂足
      extStart = lineStart;
      extEnd = foot;
    } else {
      // 垂足在终点之后，从终点延长到垂足
      extStart = lineEnd;
      extEnd = foot;
    }
    
    // 绘制延长线
    drawLine(ctx, extStart, extEnd, extensionStyle, offset);
  }
  
  // 绘制垂线（从点到垂足）
  drawLine(ctx, point, foot, perpendicularStyle, offset);
  
  // 绘制垂足标记（小方块表示直角）
  if (drawFootMark) {
    ctx.save();
    
    // 计算垂线方向向量（单位化）
    const perpDx = point.x - foot.x;
    const perpDy = point.y - foot.y;
    const perpLength = Math.sqrt(perpDx * perpDx + perpDy * perpDy);
    
    if (perpLength > 0) {
      const perpUx = perpDx / perpLength;
      const perpUy = perpDy / perpLength;
      
      // 计算线段方向向量（单位化）
      const lineDx = lineEnd.x - lineStart.x;
      const lineDy = lineEnd.y - lineStart.y;
      const lineLength = Math.sqrt(lineDx * lineDx + lineDy * lineDy);
      const lineUx = lineDx / lineLength;
      const lineUy = lineDy / lineLength;
      
      // 绘制直角标记（小正方形）
      const markSize = footMarkSize;
      const corner1 = {
        x: foot.x + lineUx * markSize,
        y: foot.y + lineUy * markSize
      };
      const corner2 = {
        x: corner1.x + perpUx * markSize,
        y: corner1.y + perpUy * markSize
      };
      const corner3 = {
        x: foot.x + perpUx * markSize,
        y: foot.y + perpUy * markSize
      };
      
      ctx.strokeStyle = perpendicularStyle.color || DRAWING_STYLES.line.color;
      ctx.lineWidth = 1;
      ctx.setLineDash([]);
      ctx.beginPath();
      ctx.moveTo(corner1.x + offsetX, corner1.y + offsetY);
      ctx.lineTo(corner2.x + offsetX, corner2.y + offsetY);
      ctx.lineTo(corner3.x + offsetX, corner3.y + offsetY);
      ctx.stroke();
    }
    
    ctx.restore();
  }
  
  return { foot, isOnSegment };
}

/**
 * 通过 ID 绘制垂线
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {Array} points - 顶点数组
 * @param {Object} perpendicular - 垂线数据 {fromPointId, toLineStartId, toLineEndId}
 * @param {Object} offset - 偏移量
 * @param {Object} options - 绘制选项（同 drawPerpendicular）
 */
export function drawPerpendicularById(ctx, points, perpendicular, offset = { offsetX: 0, offsetY: 0 }, options = {}) {
  const { fromPointId, toLineStartId, toLineEndId } = perpendicular;
  
  const fromPoint = points.find(p => p.id === fromPointId);
  const lineStart = points.find(p => p.id === toLineStartId);
  const lineEnd = points.find(p => p.id === toLineEndId);
  
  if (!fromPoint || !lineStart || !lineEnd) {
    return null; // 找不到点，跳过
  }
  
  return drawPerpendicular(ctx, fromPoint, lineStart, lineEnd, offset, options);
}


/**
 * 绘制射线（从起点经过终点延伸到画布外）
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {Object} startPoint - 起点 {x, y}
 * @param {Object} throughPoint - 经过的点 {x, y}
 * @param {Object} rayStyle - 射线样式 {style?, color?, width?, label?, labelFontSize?, labelOffset?}
 * @param {Object} offset - 偏移量 {offsetX, offsetY}
 * @param {boolean} isEditorMode - 是否为编辑模式
 */
export function drawRay(ctx, startPoint, throughPoint, rayStyle = {}, offset = { offsetX: 0, offsetY: 0 }, isEditorMode = false) {
  const { style = 'solid', color, width, label, labelFontSize, labelOffset } = rayStyle;

  // 计算射线的方向向量
  const dx = throughPoint.x - startPoint.x;
  const dy = throughPoint.y - startPoint.y;
  const length = Math.sqrt(dx * dx + dy * dy);

  if (length === 0) return; // 两点重合，无法绘制射线

  // 计算单位方向向量
  const unitDx = dx / length;
  const unitDy = dy / length;

  // 延伸到画布边界外（使用一个足够大的距离）
  const extensionDistance = 5000;

  // 计算射线的终点（从起点出发，沿方向延伸）
  const rayEnd = {
    x: startPoint.x + unitDx * extensionDistance,
    y: startPoint.y + unitDy * extensionDistance
  };

  // 使用普通线段的绘制方式
  drawLine(ctx, startPoint, rayEnd, {
    style,
    color: color || DRAWING_STYLES.line.color,
    width: width || DRAWING_STYLES.line.width,
    label,
    labelFontSize,
    labelOffset
  }, offset, isEditorMode);
}

/**
 * 通过 ID 绘制射线
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {Array} points - 顶点数组
 * @param {Object} ray - 射线数据 {startPointId, throughPointId, style?, color?, width?, label?, labelFontSize?, labelOffset?}
 * @param {Object} offset - 偏移量
 * @param {boolean} isEditorMode - 是否为编辑模式
 */
export function drawRayById(ctx, points, ray, offset = { offsetX: 0, offsetY: 0 }, isEditorMode = false) {
  const { startPointId, throughPointId, style, color, width, label, labelFontSize, labelOffset } = ray;

  const startPoint = points.find(p => p.id === startPointId);
  const throughPoint = points.find(p => p.id === throughPointId);

  if (!startPoint || !throughPoint) {
    return; // 找不到点，跳过
  }

  drawRay(ctx, startPoint, throughPoint, {
    style,
    color,
    width,
    label,
    labelFontSize,
    labelOffset
  }, offset, isEditorMode);
}


/**
 * 绘制按钮（保留原有样式，用于 UI 控件）
 * @param {CanvasRenderingContext2D} ctx - 画布上下文
 * @param {Object} button - 按钮数据 { x, y, width, height, text, isHovered? }
 */
export function drawButton(ctx, button) {
  const { x, y, width, height, text, isHovered = false } = button;

  ctx.save();

  // 背景
  ctx.fillStyle = isHovered ? '#3498db' : '#ecf0f1';
  ctx.fillRect(x, y, width, height);

  // 边框
  ctx.strokeStyle = isHovered ? '#2980b9' : '#bdc3c7';
  ctx.lineWidth = 2;
  ctx.strokeRect(x, y, width, height);

  // 文本
  ctx.fillStyle = isHovered ? '#ffffff' : '#2c3e50';
  ctx.font = '14px Arial, sans-serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, x + width / 2, y + height / 2);

  ctx.restore();
}
